<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于</title>
    <script src="../JQ/jq.min.js"></script>
    <!-- 修改页签icon logo -->
    </link>
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.min.css">
</head>
<style>
    body {
        overflow-x: hidden;
        background: url(http://www.yinhuafeng.cn/images/bl.png) no-repeat fixed bottom left, url(http://www.yinhuafeng.cn/images/tr.png) no-repeat fixed top right, #f0f2f7;
    }

    .nav {
        display: none;
        position: fixed;
        top: 25%;
        transform: translate(0, -50%);
    }

    .nav a {
        cursor: pointer;
    }

    .current {
        background-color: rgb(239, 211, 216);
    }
</style>

<body>
    <script>
        $(function () {

            // 1.显示隐藏电梯导航
            let toolTop = $('.readerWall').offset().top

            toggleTool()

            function toggleTool() {
                if ($(document).scrollTop() >= toolTop) {
                    $('.nav').fadeIn()
                } else {
                    $('.nav').fadeOut()
                }
            }

            $(window).scroll(function () {
                toggleTool()
                // 3.当页面滚动到某个区域，左侧电梯导航小li的a标签相应添加和删除current
                $('.content .w').each(function (i, eleDom) {
                    if ($(document).scrollTop() >= $(eleDom).offset().top) {
                        // console.log(i);
                        $('.nav li').eq(i).children().addClass('current').parent().siblings().children().removeClass('current')
                    }
                })
            })

            // 2.点击电梯导航页面可以滚动到相应的内容区域
            $('.nav li').click(function () {
                let index = $(this).index()
                $(this).children('a').addClass('current').parent().siblings().children().removeClass('current')

                // 当我们每次点击小li 就需要计算出页面要去往的位置
                // 选出对应索引号的内容区的盒子 计算它的.offset().top
                let current = $('.content .w').eq(index).offset().top
                // 页面滚动效果
                $('body,html').stop().animate({
                    scrollTop: current
                })
            })
        })
    </script>
    <div class="container mt-4 bg-light">
        <div class="row mt-3">
            <div class="col-2 ">
                <ul class="nav flex-column align-middle">
                    <li class="nav-item bg-light border border-darkc">
                        <a class="nav-link active" aria-current="page" href="#">标签云</a>
                    </li>
                    <li class="nav-item bg-light border border-darkc">
                        <a class="nav-link" href="#">读者墙</a>
                    </li>
                    <li class="nav-item bg-light border border-darkc">
                        <a class="nav-link" href="#">文章存档</a>
                    </li>
                    <li class="nav-item bg-light border border-darkc">
                        <a class="nav-link " href="#">友情链接</a>
                    </li>
                </ul>
            </div>
            <div class="col-8 ">
                <div class="row content">
                    <div class="col-12 Label w">
                        <div class="row animated bounceInUp">
                            <div class="col-sm-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom  animated bounce">标签云</h1>
                            </div>
                            <div class="col-12">
                                <p style="text-indent:2em ; " class="text-secondary">
                                    帅哥
                                    <a href="javascript:;">博客</a>
                                    目前所使用的所有
                                    <a href="javascript:;">标签</a>
                                </p>
                            </div>
                            <div class="col-12">
                                <div class="row mt-3">
                                    <div class="col-sm-3">
                                        <a href="javascript:;">ZBLOG</a>×128
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">DELPHI</a>×52
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">网站建设</a>×28
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">插件</a>×256
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-3">
                                        <a href="javascript:;">ZBLOG</a>×128
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">DELPHI</a>×52
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">网站建设</a>×28
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">插件</a>×256
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-3">
                                        <a href="javascript:;">ZBLOG</a>×128
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">DELPHI</a>×52
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">网站建设</a>×28
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">插件</a>×256
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-3">
                                        <a href="javascript:;">ZBLOG</a>×128
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">DELPHI</a>×52
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">网站建设</a>×28
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">插件</a>×256
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-3">
                                        <a href="javascript:;">ZBLOG</a>×128
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">DELPHI</a>×52
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">网站建设</a>×28
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">插件</a>×256
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-3">
                                        <a href="javascript:;">ZBLOG</a>×128
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">DELPHI</a>×52
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">网站建设</a>×28
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">插件</a>×256
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-3">
                                        <a href="javascript:;">ZBLOG</a>×128
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">DELPHI</a>×52
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">网站建设</a>×28
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">插件</a>×256
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-3">
                                        <a href="javascript:;">ZBLOG</a>×128
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">DELPHI</a>×52
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">网站建设</a>×28
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">插件</a>×256
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-3">
                                        <a href="javascript:;">ZBLOG</a>×128
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">DELPHI</a>×52
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">网站建设</a>×28
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="javascript:;">插件</a>×256
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 readerWall w">
                        <div class="row animated bounceInDown">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-12">
                                        <h1 class="fw-bold fs-3 p-2 border-bottom animated bounce">读者墙</h1>
                                    </div>
                                    <div class="col-sm-12">
                                        <p style="text-indent:2em ; " class="text-secondary ">
                                            我的读者好少啊，前一百都凑不齐。。。
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 ">
                                <a href="javascript:;">
                                    <img src="./images/CSS3(1).png" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/HTML5(1).png" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/img37.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/linux.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/linux精选.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images//pay.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/pic1.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/转载文章.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/跑步.jpg " alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/分享收藏.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/timthumb.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/timthumb (2).jpg" alt="" width="40" height="40"
                                        class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/pic8.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/web.png" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/timthumb (2).jpg " alt="" height="40" width="40"
                                        class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images//pay.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/pic1.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/转载文章.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/跑步.jpg " alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/分享收藏.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/timthumb.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images//pay.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/pic1.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/转载文章.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/跑步.jpg " alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/分享收藏.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/timthumb.jpg" alt="" width="40" height="40" class="rounded p-2">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 Archive w">
                        <div class="row  animated bounceInRight">
                            <h1 class="fw-bold fs-3 p-2 border-bottom  animated bounce mt-3">存档</h1>
                            <p style="text-indent:2em ; " class="text-secondary">
                                本站全部文章都在这里啦
                            </p>
                            <div class="col-12">
                                <div class="row ">
                                    <h1 class="text-danger fs-3">五月 2022年</h1>
                                    <ul>
                                        <li style="list-style-type: square;">30日<a
                                                href="javascript:;">ZBLOG商城用户中心插件(支付宝、微信、财付通、PayPal、云支付、码支付)</a></li>
                                    </ul>
                                    <h1 class="text-danger fs-3">十二月 2021年</h1>
                                    <ul>
                                        <li style="list-style-type: square;">06日<a href="javascript:;">相册插件</a></li>
                                    </ul>
                                    <h1 class="text-danger fs-3">八月 2021年</h1>
                                    <ul>
                                        <li style="list-style-type: square;">02日<a href="javascript:;">搜索优化增强</a></li>
                                    </ul>
                                    <h1 class="text-danger fs-3">七月 2021年</h1>
                                    <ul>
                                        <li style="list-style-type: square;">14日<a href="javascript:;">文章内容分页插件</a></li>
                                    </ul>
                                    <h1 class="text-danger fs-3">五月 2022年</h1>
                                    <ul>
                                        <li style="list-style-type: square;">30日<a
                                                href="javascript:;">关于百度站长工具不支持索引型sitemap的说明</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 Links w">
                        <div class="row animated bounceInLeft">
                            <div class="col-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom ">友情链接</h1>
                            </div>
                            <div class="col-12">
                                <p style="text-indent:2em ; " class="text-secondary">
                                    友情链接<a href="javascript:;">内页</a>
                                </p>
                            </div>
                            <div class="col-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom mt-3">友情链接</h1>
                            </div>
                            <div class="col-12">
                                <div class="row" style="text-indent:2em ; ">
                                    <div class="col-sm-4 "><a href="javascript:;">橙色阳光</a></div>
                                    <div class="col-sm-4 "><a href="javascript:;">卢松松博客</a></div>
                                    <div class="col-sm-4 "><a href="javascript:;">ZSXSOFT-zsx的原创博客！</a></div>
                                </div>
                            </div>
                            <div class="col-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom mt-3">网站收藏</h1>
                            </div>
                            <div class="col-12" style="text-indent:2em ; ">
                                <a href="javascript:;">ZBlogger社区</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 Links w">
                        <div class="row animated bounceInLeft">
                            <div class="col-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom ">友情链接</h1>
                            </div>
                            <div class="col-12">
                                <p style="text-indent:2em ; " class="text-secondary">
                                    友情链接<a href="javascript:;">内页</a>
                                </p>
                            </div>
                            <div class="col-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom mt-3">友情链接</h1>
                            </div>
                            <div class="col-12">
                                <div class="row" style="text-indent:2em ; ">
                                    <div class="col-sm-4 "><a href="javascript:;">橙色阳光</a></div>
                                    <div class="col-sm-4 "><a href="javascript:;">卢松松博客</a></div>
                                    <div class="col-sm-4 "><a href="javascript:;">ZSXSOFT-zsx的原创博客！</a></div>
                                </div>
                            </div>
                            <div class="col-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom mt-3">网站收藏</h1>
                            </div>
                            <div class="col-12" style="text-indent:2em ; ">
                                <a href="javascript:;">ZBlogger社区</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 Links w">
                        <div class="row animated bounceInLeft">
                            <div class="col-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom ">友情链接</h1>
                            </div>
                            <div class="col-12">
                                <p style="text-indent:2em ; " class="text-secondary">
                                    友情链接<a href="javascript:;">内页</a>
                                </p>
                            </div>
                            <div class="col-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom mt-3">友情链接</h1>
                            </div>
                            <div class="col-12">
                                <div class="row" style="text-indent:2em ; ">
                                    <div class="col-sm-4 "><a href="javascript:;">橙色阳光</a></div>
                                    <div class="col-sm-4 "><a href="javascript:;">卢松松博客</a></div>
                                    <div class="col-sm-4 "><a href="javascript:;">ZSXSOFT-zsx的原创博客！</a></div>
                                </div>
                            </div>
                            <div class="col-12">
                                <h1 class="fw-bold fs-3 p-2 border-bottom mt-3">网站收藏</h1>
                            </div>
                            <div class="col-12" style="text-indent:2em ; ">
                                <a href="javascript:;">ZBlogger社区</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="bg-success p-2 text-dark bg-opacity-50 text-center mt-5 font-monospace lazyfade zoomin-r ">
                一切的成就源于积累&copy; 2022
                来自一个帅哥的个人博客</div>
        </div>
    </div>
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</body>

</html>